.mod_systemlist .inside {
    width: 86%;
    margin: auto;
    max-width: 1636px;
    max-width: clamp(15.5em, 86%, 90.9em)
}

.mod_systemlist_whole .list-intro {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em
}

@media (max-width: 720px) {
    .mod_systemlist_whole .list-intro {
        flex-direction:column-reverse;
        gap: 1em
    }
}

.mod_systemlist_whole .total-number {
    color: #3B3B3B;
    margin-left: 1em
}

.mod_systemlist_whole .sort-buttons {
    display: flex;
    align-items: center;
    margin-right: 1em
}

@media (max-width: 520px) {
    .mod_systemlist_whole .sort-buttons {
        flex-direction:column;
        align-items: flex-start
    }
}

.mod_systemlist_whole .sort-buttons .buttons-wrapper {
    display: flex;
    align-items: center
}

@media (max-width: 520px) {
    .mod_systemlist_whole .sort-buttons .buttons-wrapper {
        margin-left:1em
    }
}

.mod_systemlist_whole .sort-buttons span {
    color: #3B3B3B;
    cursor: pointer
}

.mod_systemlist_whole .sort-buttons span:last-child {
    margin-left: 0.25em
}

.mod_systemlist_whole .sort-buttons span.active {
    pointer-events: none;
    opacity: 0.7
}

.mod_systemlist_whole .sort-buttons p {
    color: #3B3B3B;
    margin-left: 1em;
    margin-right: 0.5em
}

.mod_systemlist_whole .system-wrapper .system-list-grid {
    width: 100%
}

@media (min-width: 1281px) {
    .mod_systemlist_whole .system-wrapper .system-list-grid {
        grid-template-columns:repeat(4, 1fr);
        max-width: unset
    }
}

.system-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    overflow: hidden;
    margin: 1.11em auto clamp(4em, 8vw, 9.55em)
}

.system-wrapper .product-filters-wrap {
    width: calc(25.25% - 1.11em);
    margin-right: 1.11em
}

.system-wrapper .system-list-grid {
    width: 74.75%
}

.system-wrapper .no-items {
    font-size: 1.77em;
    font-size: clamp(1.38em, 1.66vw, 1.77em);
    font-family: "universal-extended", helvetica, arial, sans-serif;
    line-height: 1.09em;
    color: #3B3B3B
}

@media only screen and (max-width: 1200px) {
    .system-wrapper {
        margin-top:0
    }

    .system-wrapper .product-filters-wrap,.system-wrapper .system-list-grid {
        width: 100%;
        margin: 0
    }
}

.system-list-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.11em;
    max-width: 68em;
    margin: 0 auto
}

@media only screen and (max-width: 1024px) {
    .system-list-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 620px) {
    .system-list-grid {
        display:block
    }
}

.system-list-grid .system-teaser {
    min-height: 22.50em
}

@media only screen and (max-width: 1440px) {
    .system-list-grid .system-teaser {
        min-height:17em
    }
}

@media (max-width: 620px) {
    .system-list-grid .system-teaser {
        max-width:18.111em;
        margin: 0 auto 1.11em
    }
}